<!-- Handlebars template -->
<script id="monitoringInfo" type="text/x-handlebars-template">
    <div class="tab-pane active" id="rpcLog">
        <div class="row">
            <div class="infos col-sm-6">
                <h3>Daemon</h3>
                <ul class="list-unstyled">
                    <li><strong>Last check:</strong> {{monitoringDaemon.lastCheck}}</li>
                    <li><strong>Last status:</strong>
                        <span id="daemonStatus">{{monitoringDaemon.lastStatus}}</span>
                    </li>
                    <li><strong>Last response:</strong>
                        <pre>{{monitoringDaemon.lastResponse}}</pre>
                    </li>
                    <li><strong>Last fail:</strong>
                        <span>{{monitoringDaemon.lastFail}}</span>
                    </li>
                    <li><strong>Last fail response:</strong>
                        <pre>{{monitoringDaemon.lastFailResponse}}</pre>
                    </li>
                </ul>
            </div>
            <div class="infos col-sm-6">
                <h3>Wallet</h3>
                <ul class="list-unstyled">
                    <li><strong>Last check:</strong> {{monitoringWallet.lastCheck}}</li>
                    <li><strong>Last status:</strong>
                        <span id="walletStatus">{{monitoringWallet.lastStatus}}</span>
                    </li>
                    <li><strong>Last response:</strong>
                        <pre>{{monitoringWallet.lastResponse}}</pre>
                    </li>
                    <li><strong>Last fail:</strong>
                        <span>{{monitoringWallet.lastFail}}</span>
                    </li>
                    <li><strong>Last fail response:</strong>
                        <pre>{{monitoringWallet.lastFailResponse}}</span></pre>
                </ul>
            </div>
        </div>

        <h3>Logs</h3>

        <div class="table-responsive">
            <table class="table table-hover table-striped logList" id="logTable">
                <thead>
                <tr>
                    <th class="sort">Name <i class="fa fa-sort"></i></th>
                    <th class="sort">Modified <i class="fa fa-sort"></i></th>
                    <th class="sort">Size <i class="fa fa-sort"></i></th>
                </tr>
                </thead>
                <tbody>
                {{#each logs}}
                <tr>
                    <td data-sort="{{@key}}"><a href="{{this.link}}" target="_blank">{{@key}}</a></td>
                    <td data-sort="{{this.changed}}">{{this.changed}}</td>
                    <td data-sort="{{this.size}}">{{this.size}} bytes</td>
                </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</script>

<!-- Tab panes -->
<div class="adminMonitor">
    <div class="tab-content">
        <div id="monitoringInfoView"></div>
    </div>
</div>

<!-- Javascript -->
<script>
function getCheckTime(timestamp) {
    return timestamp ? $.timeago(new Date(timestamp * 1000).toISOString()) : null;
}

function monitoringInfoParse(data) {
    var monitoringDaemon = {
        lastCheck: getCheckTime(data['monitoring'].daemon.lastCheck) || 'never',
        lastStatus: data['monitoring'].daemon.lastStatus || '',
        lastFail: getCheckTime(data['monitoring'].daemon.lastFail) || 'never',
        lastFailResponse: data['monitoring'].daemon.lastFailResponse || ' ',
        lastResponse: data['monitoring'].daemon.lastResponse || ' '
    };
    var monitoringWallet = {
        lastCheck: getCheckTime(data['monitoring'].wallet.lastCheck) || 'never',
        lastStatus: data['monitoring'].wallet.lastStatus || '',
        lastFail: getCheckTime(data['monitoring'].wallet.lastFail) || 'never',
        lastFailResponse: data['monitoring'].wallet.lastFailResponse || ' ',
        lastResponse: data['monitoring'].wallet.lastResponse || ' '
    };
    
    var properData = {};
    if(data.hasOwnProperty('logs')) {
        properData['logs'] = data['logs'];
        for(var log in data['logs']) {
            data['logs'][log].changed = formatDate(data['logs'][log].changed);
            data['logs'][log].link = api + '/admin_log?file=' + log + '&password=' + docCookies.getItem('password');
        }
    }
    properData['monitoringDaemon'] = monitoringDaemon;
    properData['monitoringWallet'] = monitoringWallet;

    return properData;
}

function renderLogInfo() {
    $.ajax({
        url: api + '/admin_monitoring',
        data: {password: docCookies.getItem('password')},
        dataType: 'json',
        cache: false,
        success: function(data) {
            renderTemplate(monitoringInfoParse(data), '#monitoringInfo', '#monitoringInfoView');
	    
            $('#daemonStatus').addClass(data['monitoring'].daemon.lastStatus == 'ok' ? 'text-success' : 'text-danger');
            $('#walletStatus').addClass(data['monitoring'].wallet.lastStatus == 'ok' ? 'text-success' : 'text-danger');

            $('#logTable th.sort').on('click', sortTable);
        }
    });
}

$(function() {
    renderLogInfo();
});
</script>
